<example name="Alert Service">
  <file type="html" disable-auto-size>
    <div id="alert-service"></div>
  </file>

  <file type="css">
    button {
      margin-right: 8px !important;
    }
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React from 'react';
    import Button from '@jetbrains/ring-ui/components/button/button';
    import alert from '@jetbrains/ring-ui/components/alert-service/alert-service';

    class AlertServiceDemo extends React.Component {
      componentDidMount () {
        setTimeout(() => {
          alert.message('A initial message', 5000);
          alert.error('Error message');
        }, 100);
      }

      showError = () => {
        this.lastKey = alert.error('Something wrong happened');
      }

      showMessage = () => {
        this.lastKey = alert.message('This is just a message', 5000);
      }

      removeLastAlert = () => {
        alert.remove(this.lastKey);
      }

      render() {
        return (
          <div>
            <Button onClick={this.showError}>Show error</Button>
            <Button onClick={this.showMessage}>Show message</Button>
            <Button onClick={this.removeLastAlert}>Remove last alert</Button>
          </div>
        );
      }
    }

    render(<AlertServiceDemo/>, document.getElementById('alert-service'));
  </file>
</example>
